<template>
	<view class="wrap">
		<view>暂无具体资料</view>
		<view class="learnTime">
			<view>已学习</view>
			<view class="red">120</view>
			<view>分钟</view>
		</view>
		<view class="record" @click="exportShow=true">
			随心笔记
		</view>
		<view class="test" @click="openPage('/pages/workbench/learning/classroom/selfTest')">
			我要自测
		</view>
		<view class="learnProgess">
			<u-circle-progress active-color="#2979ff" :percent="50" :width="150">
					<view class="u-progress-content">
						<view class="u-progress-dot">已阅读</view>
						<text class='u-progress-info'>50%</text>
					</view>
				</u-circle-progress>
		</view>
		<u-popup v-model="exportShow" mode="bottom">
			<view class="pop-content">
				<view class="textBox">
					<textarea placeholder="请输入"></textarea>
				</view>
				<u-button @click="submit" type="success">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exportShow:false,
			}
		},
		methods: {
			submit(){},
			openPage(url){
				this.$u.route({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	padding:20rpx;
}

.learnTime{
	position: fixed;
	width: 80px;
	height:80px;
	border-radius:80px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.7);
	color:#2979FF;
	text-align: center;
	font-size:20rpx;
	padding-top:16rpx;
	bottom:20rpx;
	.red{
		color:#FA3534;
		font-size:40rpx;
	}
}
.learnProgess{
	position: fixed;
	right:20rpx;
	width: 80px;
	height:80px;
	font-size:20rpx;
	bottom:20rpx;
	text-align: center;
}
.record{
	position: fixed;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	right:20rpx;
	width: 60px;
	height:60px;
	line-height: 60px;
	border-radius:60px;
	font-size:20rpx;
	bottom:200rpx;
	text-align: center;
	background: #18B566;
	color:#fff;
}
.pop-content{
	
	textarea{
		display: block;
		width: 100%;
		height:200rpx;
		
	}
	.textBox{
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-bottom:1px solid #d9d9d9;
	}
	button{
		margin:20rpx;
	}
}
.test{
	position: fixed;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	left:20rpx;
	width: 60px;
	height:60px;
	line-height: 60px;
	border-radius:60px;
	font-size:20rpx;
	bottom:200rpx;
	text-align: center;
	background: #2979FF;
	color:#fff;
}
</style>
